<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item label="分类名称">
        <el-input placeholder="请输入分类名称" clearable v-model="name" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="load">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </el-button>
        <el-button size="small" @click="refresh">
          <el-icon>
            <Refresh />
          </el-icon>
          重置
        </el-button>
        <el-button type="primary" size="small" @click="handleAdd">
          <el-icon style="vertical-align: middle">
            <Plus />
          </el-icon>
          <span style="vertical-align: middle"> 新增 </span>
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" border>
      <el-table-column align="center" label="序号" type="index" width="55" fixed></el-table-column>
      <el-table-column align="center" label="上级分类" prop="category[0].name"></el-table-column>
      <el-table-column align="center" label="分类" prop="name" />
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button text size="small" type="primary" @click="editNews(row)">编辑</el-button>
          <el-button text size="small" type="danger" @click="delNews(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" :pageSize="pageSize" :pageNum="pageNum"></Pagination>
    <el-dialog :title="title" width="420" v-model="dialogVisible" @close="cancel">
      <el-form ref="addFormRef">
        <el-form-item label="上级分类">
          <el-select v-model="form.parent">
            <el-option v-for="item in list" :key="item._id" :label="item.name" :value="item._id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button @click="confirm" type="primary">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
  getCategoryList,
  editCategoryApi,
  addCategoryApi,
  delCategoryApi
} from '@/api/content/category'
// @ts-ignore
import Pagination from '@/components/Pagination/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
const list = ref([])
const dialogVisible = ref(false)
const addFormRef = ref(null)
const title = ref('新增分类')
const editId = ref('')
const total = ref()
const pageSize = ref(20)
const pageNum = ref(1)
const name = ref()
const form = ref({
  name: '',
  parent: null
})
const refresh = () => {
  name.value = ''
  load()
}
const load = () => {
  getCategoryList({
    name: name.value,
    pageSize: pageSize.value,
    pageNum: pageNum.value
  }).then((res) => {
    res.data.list.forEach((item, index) => {
      item.index = index + 1 + (pageNum.value - 1) * pageSize.value
    })
    list.value = res.data.list
    total.value = res.data.total
  })
}
const editNews = (row) => {
  title.value = '编辑新闻'
  editId.value = row._id
  form.value.name = row.name
  form.value.parent = row.parent
  dialogVisible.value = true
}
const delNews = (row) => {
  ElMessageBox.confirm('改操作将删除这条新闻?', '确认删除', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning'
  })
    .then(() => {
      delCategoryApi(row._id).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        load()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
const cancel = () => {
  form.value.name = ''
  form.value.parent = ''
  dialogVisible.value = false
}
const confirm = () => {
  if (title.value == '编辑新闻') {
    editCategoryApi(editId.value, form.value).then((res) => {
      dialogVisible.value = false
      cancel()
      load()
      ElMessage({
        message: '编辑成功',
        type: 'success'
      })
    })
  } else {
    addCategoryApi(form.value).then((res) => {
      console.log('res', res)
      dialogVisible.value = false
      cancel()
      load()
      ElMessage({
        message: '新增成功',
        type: 'success'
      })
    })
  }
}
const handleAdd = () => {
  title.value = '新增新闻'
  dialogVisible.value = true
}
load()
</script>

<style scoped lang="less">
.pic {
  width: 100px;
  height: 50px;
}
</style>
